<template>
  <div>
    <nav-header></nav-header>
    <nav-bread>
      <span>My Account</span>
    </nav-bread>
    <div class="container">
      <h4>我的订单</h4>
      <ul>
        <li v-for="item in orderList" :key=item.orderId
          class="order-item">
          <dl>
            <dt>订单编号：{{ item.orderId }}</dt>
            <dd v-for="p in item.goodsList" :key="p.productId">
              <span>{{ p.productName }}</span>
              <span class="gold">{{ p.salePrice | currency }}</span>
            </dd>
          </dl>
          <span class="gold">{{ item.orderTotal | currency }}</span>
          <span>{{ item.addressInfo.userName }}</span>
          <span>{{ item.createDate }}</span>
        </li>
      </ul>
    </div>
    <nav-footer></nav-footer>
    <modal :showModal="showModalRemoveOrder" @close="showModalRemoveOrder = false">
      <p slot="message">确定要删除该订单吗？</p>
      <div slot="btnGroup">
        <button class="btn btn--m" @click="removeOrder(toBeRemovedOrderId)">确定</button>
        <button class="btn btn--m" @click="showModalRemoveOrder = false">取消</button>
      </div>
    </modal>
  </div>
</template>

<script>
import NavHeader from '@/components/NavHeader'
import NavFooter from '@/components/NavFooter'
import NavBread from '@/components/NavBread'
import Modal from '@/components/Modal'
import axios from 'axios'
export default {
  name: 'Account',
  components: {
    NavHeader,
    NavBread,
    NavFooter,
    Modal
  },
  data () {
    return {
      showModalRemoveOrder: false,
      toBeRemovedOrderId: '',
      orderList: []
    }
  },
  methods: {
    getOrderList () {
      console.log('getOrderList')
      axios.get('/users/order/list')
        .then(res => {
          if (res.status === 200) {
            const data = res.data
            this.orderList = data.result
          }
        })
    },
    removeOrder (orderId) {
      console.log('removeOrder')
      this.showModalRemoveOrder = true
    }
  },
  mounted () {
    this.getOrderList()
  }
}
</script>

<style>
.order-item {
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
}
.gold {
  color: #b8860b;
  font-weight: bold;
}
</style>
